<template>
  <div class="min-h-screen flex flex-col justify-center items-center bg-gray-100 p-10">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.png" alt="bg-image" class="w-screen fixed top-0 left-0 z-0" />
    <div class="w-full max-w-5xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden relative">
      <div class="px-10 py-12">
        <div class="flex items-start justify-between">
          <div class="w-2/3 flex items-center">
            <img :src="userInfo.avatar" alt="用户头像" class="w-48 h-48 object-cover rounded-full mr-4" v-if="userInfo.avatar" />
            <div class="w-1/2">
              <h1 class="text-3xl font-bold mb-4">{{ userInfo.name }}</h1>
              <p class="text-gray-500 mb-6">{{ userInfo.role }}</p>
              <p class="text-gray-500">{{ userInfo.email }}</p>
            </div>
          </div>
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <!-- 返回首页按钮 -->
          <el-affix :offset="20">
            <el-button type="primary" @click="goToHome">返回首页</el-button>
          </el-affix>
        </div>
        <!-- 绑定手机号部分 -->
        <div class="mt-8">
          <h2 class="text-xl font-semibold mb-2">绑定手机号</h2>
          <input type="tel" v-model="phoneNumber" placeholder="请输入手机号" class="w-full p-3 border rounded-lg border-gray-300 focus:border-blue-500" />
          <button class="mt-4 bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 focus:outline-none" @click="bindPhoneNumber">绑定</button>
          <p class="mt-2 text-gray-500" v-if="phoneBindStatus === 'pending'">正在绑定，请稍候...</p>
          <p class="mt-2 text-green-500" v-if="phoneBindStatus === 'success'">手机号已绑定</p>
          <p class="mt-2 text-red-500" v-if="phoneBindStatus === 'error'">{{ phoneBindError }}</p>
        </div>
        <el-descriptions
          class="margin-top"
          title="With border"
          :column="3"
          :size="'large'"
          border
        >
          <template #extra>
            <el-button type="primary">Operation</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user />
                </el-icon>
                Username
              </div>
            </template>
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone />
                </el-icon>
                Telephone
              </div>
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <location />
                </el-icon>
                Place
              </div>
            </template>
            Suzhou
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                Remarks
              </div>
            </template>
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                Address
              </div>
            </template>
            No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
          </el-descriptions-item>
        </el-descriptions>
        <!-- 浏览历史部分 -->
        <div class="mt-12">
          <h2 class="text-2xl font-semibold mb-4">浏览历史</h2>
          <el-table :data="filterTableData" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%">
            <el-table-column fixed type="index" width="50" index="indexMethod" />
            <el-table-column fixed prop="date" label="Date" sortable width="150">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <el-icon><timer /></el-icon>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="diseaseName" label="皮肤病名称" width="150" />
            <el-table-column prop="classification" label="分类" width="120" />
            <el-table-column prop="symptoms" label="症状" width="200" />
            <el-table-column prop="diagnosisTime" label="诊断时间" width="180" />
            <el-table-column prop="doctor" label="医生" width="120" />
            <el-table-column prop="treatment" label="治疗方案" width="270" />
            <el-table-column fixed="right" label="操作" min-width="160">
              <template #header>
                <el-input v-model="search" size="small" placeholder="输入关键词搜索" />
              </template>
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">
                  详情
                </el-button>
                <el-button link type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 设置下拉菜单 -->
        <div class="mt-6 flex justify-end h-10 p-0">
          <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 focus:outline-none" @click="toggleSettingsMenu">
            <span>设置</span>
            <svg v-if="isSettingsMenuOpen" class="ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            <svg v-else class="ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"></svg>
          </button>
          <div v-if="isSettingsMenuOpen" class="absolute right-0 top-100 bg-white rounded-lg shadow-lg p-4 w-200" style="z-index: 1000;">
            <ul>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="goToProfileSettings">个人资料设置</a>
              </li>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="goToPasswordSettings">密码设置</a>
              </li>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="logout">退出登录</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 返回顶部按钮 -->
        <el-backtop :right="100" bottom="80">
          <div
            style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
          >
            UP
          </div>
        </el-backtop>
      </div>
    </div>
    <!-- 底部版权信息区 -->
    <footer class="bg-none p-4 text-white mt-12 text-center relative">
      &copy; {{ currentYear }} 皮肤病分类与识别项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { Timer } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'

const size = ref<ComponentSize>('default')
const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.diseaseName.toLowerCase().includes(search.value.toLowerCase())
  )
)
const indexMethod = (index: number) => {
  return index
}
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const currentYear = ref(new Date().getFullYear());
const userInfo = ref({
  avatar: 'src/assets/images/avatar.png', // 替换为实际的头像路径
  name: '用户姓名',
  role: '用户角色',
  email: 'user@example.com',
});

const phoneNumber = ref('');
const phoneBindStatus = ref('');
const phoneBindError = ref('');
const isSettingsMenuOpen = ref(false);

// 获取路由实例
const router = useRouter();

const bindPhoneNumber = () => {
  // 这里的逻辑应该是发送请求到后端来绑定手机号
  // 为了简化，我们直接模拟一个成功绑定
  phoneBindStatus.value = 'pending';
  setTimeout(() => {
    phoneBindStatus.value = 'success';
    // 如果绑定失败，可以设置为 'error' 并设置 phoneBindError 的内容
    // phoneBindStatus.value = 'error';
    // phoneBindError.value = '绑定失败，请重试。';
  }, 2000);
};

const toggleSettingsMenu = () => {
  isSettingsMenuOpen.value = !isSettingsMenuOpen.value;
};

const goToProfileSettings = () => {
  // 跳转到个人资料设置页面
  console.log('跳转到个人资料设置页面');
  // 你可以使用 vue-router 或其他方法来实现页面跳转
  isSettingsMenuOpen.value = false;
};

const goToPasswordSettings = () => {
  // 跳转到密码设置页面
  console.log('跳转到密码设置页面');
  // 你可以使用 vue-router 或其他方法来实现页面跳转
  isSettingsMenuOpen.value = false;
};

const logout = () => {
  // 退出登录的逻辑
  console.log('用户已退出登录');
  // 你可以清除用户信息、重定向到登录页面等
  isSettingsMenuOpen.value = false;
};

const handleEdit = (index: number, row: any) => {
  console.log(`点击了编辑按钮，编辑第${index}行数据，对应皮肤病：${row.diseaseName}`);
  // 此处可添加真正的编辑逻辑，比如跳转到编辑页面等，根据实际业务需求完善
  alert('此功能暂未完全实现，仅作示意，你点击了编辑按钮');
};

const handleDelete = (index: number, row: any) => {
  const confirmDelete = window.confirm(`确定要删除 ${row.diseaseName} 的浏览记录吗？`);
  if (confirmDelete) {
    filterTableData.value.splice(index, 1);
    console.log(`已删除 ${row.diseaseName} 的浏览记录`);
  }
};

const tableData = [
  {
    date: '2016-05-03',
    diseaseName: '湿疹',
    classification: '炎症性皮肤病',
    symptoms: '皮肤瘙痒、红斑、丘疹，伴有渗出倾向等',
    diagnosisTime: '2016-05-03 10:30:00',
    doctor: 'Dr. Smith',
    treatment: '外用糖皮质激素药膏，口服抗组胺药等'
  },
  {
    date: '2016-05-02',
    diseaseName: '痤疮',
    classification: '炎症性皮肤病',
    symptoms: '面部出现粉刺、丘疹、脓疱等皮损',
    diagnosisTime: '2016-05-02 14:15:00',
    doctor: 'Dr. Johnson',
    treatment: '外用维A酸类药物，口服抗生素等'
  },
  {
    date: '2016-05-04',
    diseaseName: '银屑病',
    classification: '免疫介导的慢性炎症性皮肤病',
    symptoms: '皮肤上出现边界清晰的红斑，其上覆盖有银白色鳞屑',
    diagnosisTime: '2016-05-04 09:45:00',
    doctor: 'Dr. Brown',
    treatment: '外用维生素D3衍生物，光疗，系统应用免疫抑制剂等'
  },
  {
    date: '2016-05-01',
    diseaseName: '白癜风',
    classification: '色素性皮肤病',
    symptoms: '皮肤出现大小不等、形态不一的色素脱失斑',
    diagnosisTime: '2016-05-01 11:20:00',
    doctor: 'Dr. Wilson',
    treatment: '外用糖皮质激素、钙调神经磷酸酶抑制剂等，结合光疗'
  }
];

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

// 新增，返回首页按钮点击事件处理函数
const goToHome = () => {
  router.push('/Home');
};

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>